@extends('admin.layout')
@section('content')
  <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
               用户管理
                <small>列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 后台</a></li>
                <li><a href="#">用户管理</a></li>
                <li class="active">列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">快速查看用户列表</h3>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                            @if(session('info'))
                            <div id="showHidden" class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4>    <i class="icon fa fa-check"></i> Alert!</h4>
                                {{session('info')}}
                            </div>
                            @endif

                            <script type="text/javascript">
                                window.onload = function()
                                {
                                   $("#showHidden").hide(3000);
                                }
                            </script>
                            <form action="{{url('admin/user/index')}}" method="get">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <select name="num" class="form-control">
                                                <option value="10" 
                                                @if(!empty($request['num'])&& $request['num']==10) 
                                                    selected="selected"
                                                @endif
                                                >10</option>
                                                <option value="20"
                                                @if(!empty($request['num'])&& $request['num']==20) 
                                                    selected="selected"
                                                @endif
                                                >20</option>
                                                <option value="30"
                                                @if(!empty($request['num'])&& $request['num']==30) 
                                                    selected="selected"
                                                @endif
                                                >30</option>
                                                <option value="50"
                                                @if(!empty($request['num'])&& $request['num']==50) 
                                                    selected="selected"
                                                @endif

                                                >50</option>
                                                <option value="100"
                                                @if(!empty($request['num'])&& $request['num']==100) 
                                                    selected="selected"
                                                @endif
                                                >100</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-md-offset-2">
                                        <div class="input-group input-group">
                                            <input class="form-control" type="text" value="{{$request['keyword'] or ''}}" name = "keyword">
                                            <span class="input-group-btn">
                                              <button class="btn btn-info btn-flat" >搜索</button>
                                            </span>
                                        </div>
                                    </div>
                                </div> 
                            </form>   
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>邮箱</th>
                                        <th>手机号</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                    @foreach($data as $user)
                                    <tr>
                                        <td id="ids">{{$user -> id}}</td>
                                        <td name="name">{{$user -> username}}
                                        </td>
                                        <td>{{$user -> email}}</td>
                                        <td>{{$user -> phone}}</td>
                                        <td class="lang">
                                            @if($user -> status == '0')
                                                启用
                                            @else
                                                禁用
                                            @endif
                                        </td>
                                        <td><a href="{{url('/admin/user/edit')}}/{{$user -> id}}">编辑</a> <a href="{{('/admin/user/delete')}}/{{$user -> id}}">删除</a></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {!! $data-> appends($request) -> render() !!}
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->

                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    <!-- page script -->

    <script type='text/javascript'>
        window.onload = function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
            });
            // 添加事件
            $('.lang').on('click',function(){
                var id = $(this).parent().children().first().html();
                // console.log(id);
                var lang = $(this);
                $.post('/admin/user/ajaxUpdate',{id:id}, function(data){
                    if(data=='0')
                    {
                        lang.html('禁用');
                    }else if(data == '2')
                    {
                        lang.html('启用');
                    }
                }, 'json');
             });


            // //双击修改用户名
            $('td[name=name]').dblclick(dblClick);
            
            function dblClick()
            {
                var td = $(this);
                //获取原来的ID和name
                var id = td.prev().html();
                var name = td.html();
                var inp = $('<input type="text"/>');
                inp.val(name);

                //将表单放到td中
                td.html(inp);

                //自动对焦
                inp.select();

                //失去焦点事件 加给input
                inp.blur(function(){
                    //获取新值
                    var newName = inp.val();

                    //ajax
                    $.post('/admin/user/ajaxUsername', {id:id, name:newName}, function(data){
                        if(data == '1')
                        {
                            alert('用户名已经存在');
                            td.html(name);
                        }else if(data == '0')
                        {
                            td.html(newName);
                        }else
                        {
                            alert('用户名修改失败');
                            td.html(name);
                        }
                    }, 'json');
                    
                    //添事件加
                    td.dblclick(dblClick);
                }); 

                //清除事件
                td.unbind('dblclick');
            }
            


    }
            


 </script>
  
@endsection